<template>
  <div class="app-container home">
    <div class="home-views">
      <div class="views-nums">
        <!-- 合伙人显示信息 -->
        <div class="views-citys-info" v-if="userStore.userType === '1'">
          <div class="info-left">
            <div class="info-title">{{ partnersData.cityNames }}</div>
            <img class="info-image" src="../assets/index_images/city.png" alt="">
          </div>
          <div class="info-right">
            <div class="info-item">
              <div class="info-item-left">姓名：{{ partnersData.parName }}</div>
              <div class="info-item-right">签约时间：{{ partnersData.contSignTime }}</div>
            </div>
            <div class="info-item">
              <div class="info-item-left">联系方式：{{ partnersData.contactWay }}</div>
              <div class="info-item-right">签约年限：{{ partnersData.contLimit }}</div>
            </div>
            <div class="info-item">
              <div class="info-item-left">编码：{{ partnersData.parCode }}</div>
            </div>
<!--            <div class="info-item">-->
<!--              <div class="info-item-left">归属：{{ partnersData.attributionValue }}</div>-->
<!--              <div class="info-item-right">抽成比例：{{ partnersData.commissionRateValue }}</div>-->
<!--            </div>-->
          </div>
        </div>

        <!-- 商家显示信息 -->
        <div class="views-shop-info" v-show="userStore.userType === '2'">
          <div class="shop-info-item">
            <div class="item-text">姓名：{{ shopData.merName }}</div>
            <div class="item-text">联系方式：{{ shopData.bankCardPhone }}</div>
          </div>
          <div class="shop-info-item">
            <div class="item-text">签约时间：{{ shopData.contSignTime }}</div>
            <div class="item-text">签约年限：{{ shopData.contLimit }}</div>
          </div>
<!--          <div class="shop-info-item shop-images">-->
<!--            <div class="item-text">营业执照：</div>-->
<!--            <el-image-->
<!--              class="item-images"-->
<!--              :src="shopData.businessLicenseImage"-->
<!--              :zoom-rate="1.2"-->
<!--              :max-scale="7"-->
<!--              :min-scale="0.2"-->
<!--              :preview-src-list="srcList"-->
<!--              :initial-index="0"-->
<!--              fit="cover"-->
<!--            />-->
<!--          </div>-->
        </div>

        <!-- 公司总部：显示营业额、注册用户、订单量 -->
        <div class="view-nums-business" v-show="userStore.userType !== '1' && userStore.userType !== '2'">
          <div class="view-nums-business-items">
            <div class="items-top">
              <img class="top-image" src="../assets/index_images/tab-one.png" alt="">
              <div class="top-title">营业额</div>
              <div class="top-num">（元）</div>
            </div>
            <div class="items-nums">
              <div class="items-nums-price">¥</div>
              <div class="items-nums-text">{{ indexBasic.turnover }}</div>
            </div>
            <div class="line-view"></div>
          </div>
          <div class="view-nums-business-items">
            <div class="items-top">
              <img class="top-image" src="../assets/index_images/tab-two.png" alt="">
              <div class="top-title">注册用户</div>
              <div class="top-num">（个）</div>
            </div>
            <div class="items-nums">
              <div class="items-nums-text">{{ indexBasic.userCount }}</div>
            </div>
            <div class="line-view"></div>
          </div>
          <div class="view-nums-business-items">
            <div class="items-top">
              <img class="top-image" src="../assets/index_images/tab-three.png" alt="">
              <div class="top-title">订单量</div>
              <div class="top-num">（个）</div>
            </div>
            <div class="items-nums">
              <div class="items-nums-text">{{ indexBasic.orderCount }}</div>
            </div>
          </div>
        </div>

        <!-- 合伙人和商家：显示营业额、订单量 -->
        <div class="view-nums-business" v-show="userStore.userType === '1' || userStore.userType === '2'">
          <div class="view-nums-business-items view-nums-citys">
            <div class="items-top">
              <img class="top-image" src="../assets/index_images/tab-one.png" alt="">
              <div class="top-title">营业额</div>
              <div class="top-num">（元）</div>
            </div>
            <div class="items-nums">
              <div class="items-nums-price">¥</div>
              <div class="items-nums-text">{{ indexBasic.turnover }}</div>
            </div>
            <div class="line-view"></div>
          </div>
          <div class="view-nums-business-items view-nums-citys">
            <div class="items-top">
              <img class="top-image" src="../assets/index_images/tab-three.png" alt="">
              <div class="top-title">订单量</div>
              <div class="top-num">（个）</div>
            </div>
            <div class="items-nums">
              <div class="items-nums-text">{{ indexBasic.orderCount }}</div>
            </div>
          </div>
        </div>

        <!-- 折线图区域 -->
        <div class="echarts-box">
          <!-- 筛选 -->
          <div class="echarts-choose">
            <div class="choose-item">
              <div :class="echartsType == 'day' ? 'item item-active' : 'item'" @click="chooseItem('day')">日<div class="line"></div></div>
              <div :class="echartsType == 'week' ? 'item item-active' : 'item'" @click="chooseItem('week')">周<div class="line"></div></div>
              <div :class="echartsType == 'month' ? 'item item-active' : 'item'" @click="chooseItem('month')">月<div class="line"></div></div>
              <div :class="echartsType == 'quarter' ? 'item item-active' : 'item'" @click="chooseItem('quarter')">季度<div class="line"></div></div>
              <div :class="echartsType == 'year' ? 'item item-active' : 'item'" @click="chooseItem('year')">年度</div>
            </div>
          </div>
          <!-- 图 -->
          <div class="echarts-item">
            <div id="main" style="width: 100%; height: calc(100% - 40px);"></div>
          </div>
        </div>

        <!-- 剩余数据 -->
        <div class="other-nums">
          <div class="view-nums-business-items" v-show="userStore.userType !== '2'">
            <div class="items-top">
              <img class="top-image" src="../assets/index_images/tab-four.png" alt="">
              <div class="top-title">活动数量</div>
              <div class="top-num">（个）</div>
            </div>
            <div class="items-nums">
              <div class="items-nums-text">{{ indexBasic.activityCount }}</div>
            </div>
          </div>
          <div class="view-nums-business-items">
            <div class="items-top">
              <img class="top-image" src="../assets/index_images/tab-five.png" alt="">
              <div class="top-title">浏览量</div>
              <div class="top-num">（人）</div>
            </div>
            <div class="items-nums">
              <div class="items-nums-text">{{ indexBasic.merchantViewCount }}</div>
            </div>
          </div>
          <div class="view-nums-business-items" v-show="userStore.userType !== '1' && userStore.userType !== '2'">
            <div class="items-top">
              <img class="top-image" src="../assets/index_images/tab-six.png" alt="">
              <div class="top-title">开通城市</div>
              <div class="top-num">（个）</div>
            </div>
            <div class="items-nums">
              <div class="items-nums-text">{{ indexBasic.cityCount }}</div>
            </div>
          </div>
          <div class="view-nums-business-items" v-show="userStore.userType !== '2'">
            <div class="items-top">
              <img class="top-image" src="../assets/index_images/tab-seven.png" alt="">
              <div class="top-title">入驻商家</div>
              <div class="top-num">（个）</div>
            </div>
            <div class="items-nums">
              <div class="items-nums-text">{{ indexBasic.merchantCount }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="views-notices">
        <div class="views-notices-title">
          <img class="title-notice" src="../assets/index_images/notice.png" alt="">
          <div class="title-text">系统公告</div>
        </div>
        <!-- 标签 -->
        <div class="views-tabs-box" v-for="(item, index) in noticeList" :key="index">
          <div class="box-item">
            <div v-if="item.noticeType == 1" class="box-item-tab tab-two">通知</div>
            <div v-else class="box-item-tab tab-one">公告</div>
            <div class="notices-texts">
              <div class="box-item-text" @click="showContent(index)">{{  item.noticeTitle  }}</div>
              <div class="box-item-content" v-show="item.show">{{ item.noticeContent }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
  import { getBasicInfo, getEchartsList, getPartnersInfo, getShopInfo } from "@/api/index"
  import { getNoticList } from "@/api/system/notice";
  import { qryMyAvlMer } from "@/api/system/tmer";
  import { qryMyAvlPar } from "@/api/system/tpar";
  import useUserStore from '@/store/modules/user'
  //  按需引入 echarts
  import * as echarts from "echarts";
  import {watch,onBeforeUnmount,ref} from "vue";
  import { ElMessageBox } from "element-plus";
  const router = useRouter();


  const userStore = useUserStore()
  const indexBasic = ref("")
  const echartsType = ref("day")
  const dateValue = ref([])
  const orderCount = ref([])
  const shopCount = ref([])
  const totalAmount = ref([])
  const userCount = ref([])
  const partnersData = ref("")
  const shopData = ref("")
  const noticeList = ref([])
  const srcList = ref([])

  // 查询通知公告列表 
  function getList() {
    getNoticList({
      msgType:userStore.userType,
      userId:userStore.userId
    }).then(res => { 
      noticeList.value = res.data
      noticeList.value.forEach(item => {
        item.show = false
        if(item.noticeContent) {
          item.noticeContent = item.noticeContent.replace(/<.+?>/g,"")
        }
      })
    })
  }
  // 点击公告展示内容
  function showContent(index) {
    noticeList.value[index].show = !noticeList.value[index].show
  }
  // echarts图表
  function init() {
    let datas = [];
    let series = [];
    let color = [];
    if (userStore.userType === '2'){
      datas = ['订单量','营业额'];
      color = ['#49B1F3',  '#D67CF8']
      series= [
        {
          name: '订单量',
          data: orderCount.value,
          type: 'line'
        },

        {
          name: '营业额',
          data: totalAmount.value,
          type: 'line'
        }
      ]
    }else if(userStore.userType === '1'){
      datas =  ['订单量', '商家量', '营业额'];
      color = ['#49B1F3', '#6CE2BD', '#D67CF8']
      series= [
        {
          name: '订单量',
          data: orderCount.value,
          type: 'line'
        },
        {
          name: '商家量',
          data: shopCount.value,
          type: 'line'
        },
        {
          name: '营业额',
          data: totalAmount.value,
          type: 'line'
        }
      ]
    }else {
      datas =  ['订单量', '商家量', '用户量', '营业额'];
      color = ['#49B1F3', '#6CE2BD','#7B9BF5', '#D67CF8']
      series= [
        {
          name: '订单量',
          data: orderCount.value,
          type: 'line'
        },
        {
          name: '商家量',
          data: shopCount.value,
          type: 'line'
        },
        {
          name: '用户量',
          data: userCount.value,
          type: 'line'
        },
        {
          name: '营业额',
          data: totalAmount.value,
          type: 'line'
        }
      ]
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
      // title: {
      //   text: '标题',
      //   x: 'center'
      // },

      legend: {
        orient: 'horizontal',
        x: 'left',
        y: 'top',
        data: datas
      },
      tooltip: {  // tooltip 用于控制鼠标滑过或点击时的提示框（下一章展开讲）
        trigger: 'axis',  
        axisPointer: { // 坐标轴指示器配置项。  
          type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。 
          axis: 'auto', // 指示器的坐标轴。   
          snap: true, // 坐标轴指示器是否自动吸附到点上  
          }, 
        showContent: true,  
      },  
      grid: {
        top: '20%',  
        left: '3%', 
        right: '10%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: {
        name: '时间',
        type: 'category',
        data: dateValue.value
      },
      yAxis: {
        name: '数量',
        type: 'value',
        // min:0, // 配置 Y 轴刻度最小值
        // max:4000,  // 配置 Y 轴刻度最大值
        // splitNumber:7,  // 配置 Y 轴数值间隔
      },

      series: series,
      color: color
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

  //获取首页看板数据
  function getIndexBasicList() {
    getBasicInfo().then(res => {
      indexBasic.value = res.data
    })
  }

  // 切换折线图
  function chooseItem(type) {
    echartsType.value = type
    getIndexEchartsList()
  }

  //获取首页echarts图表
  function getIndexEchartsList() {
    getEchartsList({
      type: echartsType.value
    }).then(res => {
      orderCount.value = res.data.orderCount
      dateValue.value = res.data.dateValue
      shopCount.value = res.data.shopCount
      totalAmount.value = res.data.totalAmount
      userCount.value = res.data.userCount
      init()
    })
  }

  // 获取合伙人或商家入驻信息
  function getUserInfo(type) {
    if(userStore.userType == 1) {
      qryMyAvlPar().then(res => {
        partnersData.value = res.data
      })
    }
    if(userStore.userType == 2) {
      qryMyAvlMer().then(res => {
        shopData.value = res.data
        // let list = []
        // list.push(res.data.businessLicenseImage)
        // srcList.value = list
      })
    }

    if(userStore.pwdDef == 1) {
      ElMessageBox.alert("您还未更改初始密码哦，点击去更改", "系统提示", {
          dangerouslyUseHTMLString: true,
          type: "error",
        }).then(() => {
          router.push("/user/profile")
        }).catch(() => {});
    }
   
  }

  onActivated(() => {
    getIndexBasicList()
    getIndexEchartsList()
    getUserInfo()
    getList()
  })

  getIndexBasicList()
  getIndexEchartsList()
  getUserInfo()
  getList()

  const stopWatching = watch(() => userStore.cascaderKey, (v) => {
    if (document.getElementById('main')){
      getIndexBasicList()
      getIndexEchartsList()
      getUserInfo()
      getList()
    }
  }, { immediate: true });
  onBeforeUnmount(() => {
    stopWatching();
  });
</script>

<style scoped lang='scss'>
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.home-views {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .views-nums {
    width: 75%;
    .views-citys-info {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .info-left {
        width: 100px;
        text-align: center;
        .info-title {
          font-size: 20px;
          font-weight: 500;
          color: #333333;
        }
        .info-image {
          width: 100px;
          height: 100px;
          margin-top: 10px;
        }
      }
      .info-right {
        width: calc(100% - 115px);
        height: 139px;
        background-color: #FFFFFF;
        padding: 0 20px;
        box-shadow: 0px 2px 4px 0px rgba(12,12,13,0.1);
        box-sizing: border-box;
        border-radius: 5px;
        .info-item {
          width: 100%;
          font-size: 16px;
          font-weight: 400;
          color: #4E5969;
          display: flex;
          margin-top: 20px;
          .info-item-left {
            width: 50%;

          }
          .info-item-right {
            width: 50%;
            
          }
        }
      }
      
      
    }
    .views-shop-info {
      width: 100%;
      height: 139px;
      background: #FFFFFF;
      border-radius: 5px;
      margin-bottom: 15px;
      box-shadow: 0px 2px 4px 0px rgba(12,12,13,0.1);
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      box-sizing: border-box;
      .shop-info-item {
        width: 33%;
        .item-text {
          font-size: 16px;
          font-weight: 400;
          color: #4E5969;
          margin-top: 20px;
        }
      }
      .shop-images {
        display: flex;
        .item-images {
          width: 150px;
          height: 96px;
          margin-top: 20px;
        }
      }
    }
    .view-nums-business {
      width: 100%;
      height: 149px;
      background: #FFFFFF;
      display: flex;
      justify-content: space-between;
      box-shadow: 0px 2px 4px 0px rgba(12,12,13,0.1);
      margin-bottom: 15px;
      border-radius: 5px;
      .view-nums-business-items {
        width: 33%;
        cursor: pointer;
        position: relative;
        .items-top {
          display: flex;
          padding: 15px 20px;
          box-sizing: border-box;
          .top-image {
            width: 30px;
            height: 30px;
          }
          .top-title {
            font-size: 16px;
            font-weight: 400;
            color: #4E5969;
            margin-left: 10px;
            margin-top: 6px;
          }
          .top-num {
            font-size: 12px;
            font-weight: 400;
            color: #4E5969;
            margin-left: 5px;
            margin-top: 10px;
          }
        }
        .items-nums {
          width: 100%;
          text-align: center;
          display: flex;
          justify-content: center;
          font-size: 16px;
          font-weight: 500;
          color: #333333;
          .items-nums-price {
            margin-top: 10px;
          }
          .items-nums-text {
            font-size: 30px;
            font-weight: 500;
            color: #333333;
            margin-left: 10px;
          }
        }
        .line-view {
          position: absolute;
          width: 1px;
          height: 139px;
          border: 1px solid;
          border-image: linear-gradient(180deg, rgba(240, 242, 245, 0.22), rgba(224, 229, 236, 1), rgba(240, 242, 245, 0.23)) 1 1;
          top: 0;
          right: 0;
        }
      }
      .view-nums-citys {
        width: 50% !important;
      }
    }
    .echarts-box {
      width: 100%;
      height: 400px;
      background: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(12,12,13,0.1);
      border-radius: 5px;
      margin-bottom: 15px;
      .echarts-choose {
        width: 100%;
        display: flex;
        justify-content: right;
        padding: 15px 20px;
        box-sizing: border-box;
        .choose-item {
          width: 205px;
          height: 30px;
          background: #FFFFFF;
          border-radius: 16px;
          display: flex;
          justify-content: space-between;
          overflow: hidden;

          .item {
            width: 41px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            font-weight: 400;
            color: #4E5969;
            background-color: #FFFFFF;
            cursor: pointer;
            position: relative;
            .line {
              position: absolute;
              top: 6px;
              right: -1px;
              width: 1px;
              height: 18px;
              border: 1px solid;
              border-image: linear-gradient(180deg, rgba(211, 217, 223, 0.06), rgba(213, 217, 223, 1), rgba(212, 217, 224, 0.19)) 1 1;
            }
          }
          .item-active {
            background-color: #5B8FF9;
            color: #FFFFFF;
          }
        }
      }
      .echarts-item {
        width: 100%;
        height: calc(100% - 40px);
      }
    }
    .other-nums {
      width: 100%;
      height: 145px;
      display: flex;
      margin-bottom: 15px;
      border-radius: 5px;
      .view-nums-business-items {
        width: 24%;
        cursor: pointer;
        position: relative;
        background-color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(12,12,13,0.1);
        margin-right: 15px;
        .items-top {
          display: flex;
          padding: 15px 20px;
          box-sizing: border-box;
          .top-image {
            width: 30px;
            height: 30px;
          }
          .top-title {
            font-size: 14px;
            font-weight: 400;
            color: #4E5969;
            margin-left: 10px;
            margin-top: 6px;
          }
          .top-num {
            font-size: 12px;
            font-weight: 400;
            color: #4E5969;
            margin-left: 5px;
            margin-top: 10px;
          }
        }
        .items-nums {
          width: 100%;
          text-align: center;
          display: flex;
          justify-content: center;
          font-size: 16px;
          font-weight: 500;
          color: #333333;
          .items-nums-price {
            margin-top: 10px;
          }
          .items-nums-text {
            font-size: 30px;
            font-weight: 500;
            color: #333333;
            margin-left: 10px;
          }
        }
      }
      
    }
  }
  .views-notices {
    width: 24%;
    background-color: #FFFFFF;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0px 2px 4px 0px rgba(12,12,13,0.1);
    box-sizing: border-box;
    .views-notices-title {
      width: 100%;
      display: flex;
      .title-notice {
        width: 25px;
        height: 25px;
      }
      .title-text {
        line-height: 25px;
        font-size: 16px;
        font-weight: 400;
        color: #4E5969;
        margin-left: 10px;
      }
    }
    .views-tabs-box {
      margin-top: 15px;
      .box-item {
        width: 100%;
        // height: 20px;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        .box-item-tab {
          width: 23%;
          height: 20px;
          font-size: 10px;
          font-weight: 400;
          text-align:center;
          line-height: 20px;
          border-radius: 20px;
        }
        .tab-one {
          background-color: #E9FFE0;
          color: #53BE27;
        }
        .tab-two {
          background-color: #FFF5D7;
          color: #FFCA2D;
        }
        .tab-three {
          background-color: #EEF6FF;
          color: #4999F4;
        }
        .notices-texts {
          width: 73%;
          .box-item-text {
            width: 100%;
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
          }
          .box-item-content {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            margin-top: 8px;
            background: #F9F9F9;
            border-radius: 10px;
          }
        }
        
      }
    }
   
  }
}
</style>

